{% block sw_extension_component_section %}
<template
    v-for="componentSection in componentSections"
    :key="componentSection.props.locationId"
>
    {# These components should not contain a position identifier because it is generally rendered #}
    <mt-card
        v-if="componentSection.component === 'card'"
        position-identifier=""
        :title="$tc(componentSection?.props?.title ?? '')"
        :subtitle="$tc(componentSection?.props?.subtitle ?? '')"
    >

        <template
            v-if="componentSection.props?.tabs"
            #tabs
        >
            <sw-tabs
                position-identifier=""
                @new-item-active="setActiveTab($event.name)"
            >
                <sw-tabs-item
                    v-for="tab in componentSection.props.tabs"
                    :key="tab.name"
                    :active-tab="getActiveTab(componentSection)?.name"
                    :name="tab.name"
                >
                    {{ $tc(tab.label ?? '') }}
                </sw-tabs-item>
            </sw-tabs>
        </template>

        <sw-iframe-renderer
            v-if="componentSection.props?.tabs && getActiveTab(componentSection)"
            :key="getActiveTab(componentSection)?.name"
            :src="componentSection.src"
            :location-id="getActiveTab(componentSection)?.locationId"
        />

        <sw-iframe-renderer
            v-if="componentSection.props?.locationId && !componentSection.props?.tabs"
            :src="componentSection.src"
            :location-id="componentSection.props.locationId"
        />
    </mt-card>
    <div v-else-if="componentSection.component === 'div'">
        <sw-iframe-renderer
            v-if="componentSection.props?.locationId"
            :src="componentSection.src"
            :location-id="componentSection.props.locationId"
        />
    </div>
</template>
{% endblock %}
